<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:f="http://xmlns.jcp.org/jsf/core"
	xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
	xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
	xmlns:mywidgets="http://xmlns.jcp.org/jsf/composite/widgets"
	xmlns:fn="http://xmlns.jcp.org/jsp/jstl/functions"
	xmlns:pt="http://xmlns.jcp.org/jsf/passthrough">

<ui:composition template="/templates/overviewTemplate.xhtml">
	<!-- <ui:composition template="/templates/contentTemplate.xhtml"> -->

	<ui:define name="title">Locale Administration</ui:define>

	<ui:define name="body">

		<h1>Locale Administration</h1>

		<script>
		$(function() {
			$(document).tooltip({
			track: true
			});

			$('input:visible:enabled:first').focus();

			$('form:first *:input[type!=hidden]:first').focus();
		});
		</script>

		<h:form id="formLocales">
			<h:panelGroup id="localePanel">

				<h:dataTable id="localeTable" value="#{localeController.allLocales}"
					var="localeUnit" styleClass="data-table" headerClass="table-header"
					rowClasses="table-odd-row,table-even-row">

					<h:column>
						<!-- column header -->
						<f:facet name="header">Action</f:facet>
						<!-- row record -->
						<h:commandButton value="edit" styleClass="mini"
							action="#{localeController.loadLocaleDetail()}">
							<f:param name="id" value="#{localeUnit.id}" />
							<f:ajax execute="@form" render=":localeUnitForm:detailGroup" />
						</h:commandButton>
						<h:commandButton value="delete" styleClass="mini"
							action="#{localeController.deleteLocale()}">
							<f:param name="id" value="#{localeUnit.id}" />
							<f:ajax execute="@this"
								render="@form :localeUnitForm:detailGroup" />
						</h:commandButton>
					</h:column>

					<h:column sortBy="#{localeUnit.language}">
						<f:facet name="header">ID</f:facet>
						<h:outputText value="#{localeUnit.id}" />
					</h:column>

					<h:column>
						<!-- column header -->
						<f:facet name="header">Locale Code</f:facet>
						<!-- row record -->
    					#{localeUnit.language.languageCode}<h:panelGroup
							rendered="#{not empty localeUnit.country.countryCode}">-#{localeUnit.country.countryCode}</h:panelGroup>

					</h:column>
					<h:column>
						<!-- column header -->
						<f:facet name="header">Language, Country</f:facet>
						<!-- row record -->
    					#{localeUnit.language.nativeLanguageName}<h:panelGroup
							rendered="#{not empty localeUnit.country.countryCode}">, #{localeUnit.country.countryName}</h:panelGroup>
					</h:column>
				</h:dataTable>
			</h:panelGroup>
		</h:form>

		<p class="betweenSections" />

		<h2>Locale unit</h2>

		<h:form id="localeUnitForm">

			<h:panelGroup id="detailGroup">
				<h:inputHidden id="id" value="#{localeController.id}" />				
				<p />
				Generated Locale Code:
				<span id="localeCode"
					style="font-size: 20px; color: green; border: 1px solid white; padding: 10px;">&nbsp;#{localeController.languageCode}<h:panelGroup rendered="#{not empty localeController.countryCode}">-#{localeController.countryCode}&nbsp;</h:panelGroup></span>

				<p class="betweenSections" />

				<table>
					<tr>
						<td><label for="languageCode">The 2-letter language
								code.</label> <h:inputText id="languageCode"
								value="#{localeController.languageCode}" size="2" maxlength="2"
								required="true"
								requiredMessage="Please insert a 2-letter language code."
								pt:placeholder="e.g. de" style="width:40px;" /> <label
							for="countryCode">Select the country.</label> <h:selectOneMenu
								id="countryCode" value="#{localeController.countryCode}">
								<f:selectItem />
								<f:selectItems value="#{countryController.allCountries}"
									var="country"
									itemLabel="#{country.countryName}, #{country.countryCode}, (#{country.languages})"
									itemValue="#{country.countryCode}" />
							</h:selectOneMenu> <label for="nativeLanguageName">How Native Speakers
								recognize their language.</label> <h:inputText id="nativeLanguageName"
								value="#{localeController.nativeLanguageName}" required="true"
								requiredMessage="Please insert a language description that nantive language speakers understand."
								pt:placeholder="e.g. Suomi (for Finnish)"
								title="Please insert a language description that native language speakers understand." />

						</td>
					</tr>
				</table>

				<h:commandButton value="save locale"
					action="#{localeController.saveLocale()}"
					title="If this is a new locale it will be created. Otherwise it is simply updated.">
					<f:ajax execute="@form" render=":formLocales:localePanel" />
				</h:commandButton>

				<script>
					$("#localeUnitForm\\:languageCode")
					.on("keyup", 
							(function() {				
								updateLocaleCode($(this), $('#localeUnitForm\\:countryCode'));						
							})
					)
					.on("change", 
							(function() {				
								updateLocaleCode($(this), $('#localeUnitForm\\:countryCode'));						
							})
					);

					$("#localeUnitForm\\:countryCode").on("change", 
							(function() {				
								updateLocaleCode($('#localeUnitForm\\:languageCode'), $(this));						
							})
					);

					var updateLocaleCode = function (languageCodeElement, countryCodeElement){
						languageCode = languageCodeElement.val();
						countryCode = countryCodeElement.val();
						if(countryCode == "")
							$(localeCode).html(languageCode);
						else
							$(localeCode).html(languageCode + "-" +countryCode);	

						if(isValid($(localeCode).html())){
							$(localeCode).css('color', 'green');
						}else{
							$(localeCode).css('color', 'red');
						}			
					};

					var isValid = function (localeCode){
						var regex = "(^[a-z]{2}$)|(^[a-z]{2}-[A-Z]{2}$)";
						var n = localeCode.search(regex);
						if(n == 0)
							return true;
						else
							return false;
					};
				</script>

			</h:panelGroup>

		</h:form>

		<p class="betweenSections" />

	</ui:define>
</ui:composition>
</html>
